<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		
		<div id="app">
			<h3>firstName:<input type="text" v-model="firstName" /></h3>
			<h3>lastName:<input type="text" v-model="lastName" /></h3>
			<h3>{{fullName}}</h3>
			<h1>{{fname}}</h1>
		</div>
		<script type="text/javascript">
			const app = new Vue({
				el: '#app',
				data: {
					firstName: '张',
					lastName: '三',
					// fullName: '张三'
					fname: '',
					a: {
						b: {
							c: '博为峰'
						}
					}
				},
				computed: {
					fullName() {
						return this.firstName + this.lastName;
					}
				},
				watch: {
					/* firstName(newVal, oldVal) {
						// console.log(newVal, oldVal);
						this.fname = newVal + this.lastName;
					} */
					firstName: {
						//立即触发
						immediate: true,
						handler: function(newVal, oldVal) {
							this.fname = newVal + this.lastName;
						}
					},
					a: {
						deep: true, //深度监视
						handler: function(newVal) {
							console.log("abc");
						}
					}
				},
			})
		</script>
	</body>
</html>
